<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <script src="../lib/vue.js"></script>
    <style>
        #app li{
            border: 1px dashed pink;
            width: 100%;
            list-style-type: none;
        }
        #app li:hover{
            background-color: pink;
            transition: all 0.4s ease;
        }

        .v-enter,
        .v-leave-to{
            opacity: 0;
            transform: translateY(50px);
        }

        .v-enter-active,
        .v-leave-active{
            transition: all 0.4s ease;
        }

        /* 元素在移动时的设置 */
        /* 下面的两个 目的：当删除一个li 下面的li 都以动画的形式提上来 */
        /* 绝对定位 记住就好了 */
        .v-move{
            transition: all 0.4s ease;
        }
        .v-leave-active{
            position: absolute;
        }
    </style>
</head>
<body>
    <div id="app">
        
            <div class="panel panel-primary">
                    <div class="panel-heading">
                        <h3 class="panel-title">添加品牌</h3>
                    </div>
                    <div class="panel-body form-inline">
                        <label for="">
                            Id:
                            <input type="text" class="form-control" v-model="id">
                        </label>
                        <label for="">
                            Name:
                            <input type="text" class="form-control" v-model="name" @keyup.enter="add">
                        </label>
                        <input type="button" value="添加" class="btn btn-primary" @click="add">
                        <label for="">
                            搜索
                            <input type="text" class="form-control">
                        </label>
                    </div>
                </div>
                transition 标签会生成tag 指定的标签 附带动画功能
                appear 属性 -> 指定transition标签 出现时的动画场景
                <transition-group appear tag="ul">
                    <!-- 为li群 添加动画 -->
                    <li v-for="(item,i) in list" :key="item.id" @click="del(i)">{{ item.id }} >{{ item.name }}</li>                        
                </transition-group>
    </div>
    <script>
        var vm = new Vue({
            el : "#app",
            data :{
                id:"",
                name:"",
                list:[
                    {id:1,name:"黑猫"},
                    {id:2,name:"绫濑"},
                    {id:3,name:"桐乃"},
                ]
            },
            methods:{
                add(){
                    if (this.id == "") {
                        return ;
                    }
                    this.list.push({id:this.id,name:this.name});
                },
                del(id){
                    // 根据传递进来的 id  作为index 去删除电影的li
                    this.list.splice(id,1);
                }
            },

        })
    </script>
    
</body>
</html>